<%- include('layout', { title: '登录', active: 'login' }) %>

<div class="max-w-md mx-auto">
    <div class="anime-card p-8">
        <div class="text-center mb-8">
            <i class="fas fa-cube text-6xl text-purple-500 mb-4"></i>
            <h1 class="text-3xl font-bold anime-gradient-text mb-2">欢迎回来</h1>
            <p class="text-gray-600">登录到您的Minecraft面板账户</p>
        </div>

        <form id="loginForm" class="space-y-6">
            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
                <div class="relative">
                    <i class="fas fa-user absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <input type="text" name="username" required 
                           class="anime-input w-full pl-10" 
                           placeholder="请输入用户名">
                </div>
            </div>

            <div>
                <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
                <div class="relative">
                    <i class="fas fa-lock absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400"></i>
                    <input type="password" name="password" required 
                           class="anime-input w-full pl-10" 
                           placeholder="请输入密码">
                    <button type="button" id="togglePassword" 
                            class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600">
                        <i class="fas fa-eye"></i>
                    </button>
                </div>
            </div>

            <div class="flex items-center justify-between">
                <label class="flex items-center">
                    <input type="checkbox" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
                    <span class="ml-2 text-sm text-gray-600">记住我</span>
                </label>
                <a href="#" class="text-sm text-purple-600 hover:text-purple-500">忘记密码？</a>
            </div>

            <button type="submit" id="loginButton" 
                    class="anime-button w-full py-3 text-lg font-semibold">
                <i class="fas fa-sign-in-alt mr-2"></i>登录
            </button>
        </form>

        <div class="mt-6 text-center">
            <p class="text-sm text-gray-600">
                还没有账户？
                <a href="/register" class="text-purple-600 hover:text-purple-500 font-medium">立即注册</a>
            </p>
        </div>
    </div>
</div>

<script>
// 密码显示/隐藏切换
document.getElementById('togglePassword').addEventListener('click', function() {
    const passwordInput = document.querySelector('input[name="password"]');
    const icon = this.querySelector('i');
    
    if (passwordInput.type === 'password') {
        passwordInput.type = 'text';
        icon.className = 'fas fa-eye-slash';
    } else {
        passwordInput.type = 'password';
        icon.className = 'fas fa-eye';
    }
});

// 表单提交处理
document.getElementById('loginForm').addEventListener('submit', async function(e) {
    e.preventDefault();
    
    const formData = new FormData(this);
    const data = Object.fromEntries(formData);
    
    // 禁用按钮
    const button = document.getElementById('loginButton');
    button.disabled = true;
    button.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>登录中...';
    
    try {
        const response = await fetch('/auth/login', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        });
        
        const result = await response.json();
        
        if (result.success) {
            showAlert('登录成功！正在跳转...', 'success');
            setTimeout(() => {
                window.location.href = '/dashboard';
            }, 1000);
        } else {
            showAlert(result.error || '登录失败', 'error');
            button.disabled = false;
            button.innerHTML = '<i class="fas fa-sign-in-alt mr-2"></i>登录';
        }
    } catch (error) {
        showAlert('登录失败：' + error.message, 'error');
        button.disabled = false;
        button.innerHTML = '<i class="fas fa-sign-in-alt mr-2"></i>登录';
    }
});

// 检查是否已经登录
document.addEventListener('DOMContentLoaded', async function() {
    try {
        const response = await fetch('/auth/check');
        const result = await response.json();
        
        if (result.logged_in) {
            window.location.href = '/dashboard';
        }
    } catch (error) {
        console.log('未登录状态');
    }
});
</script>

<%- scripts %>